<template>
  <div class="rightbox" v-cloak>
    <h1>广告修改</h1>
    <div class="add-box" style="width:650px;">
      <el-form ref="form" :model="form" label-width="110px">
        <el-form-item
          prop="advertindex"
          label="选择广告位"
        >
          <el-select v-model="form.advertindex" placeholder="请选择">
            <el-option
              v-for="item in adData"
              :key="item.advertindex"
              :label="item.name"
              :value="item.advertindex">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          prop="link"
          label="链接"
          :rules="[
            { required: true, message: '请填写广告主名称', trigger: 'blur' }
          ]"
        >
          <el-input v-model="form.link"></el-input>
        </el-form-item>
        <el-form-item
          prop="title"
          label="标题"
          :rules="[
            { required: true, message: '请填写广告主账号', trigger: 'blur' }
          ]"
        >
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item
          label="图片素材"
          prop=""
        >
          <el-upload
            multiple
            :action="action"
            :on-success="success"
            :on-remove="remove"
            :file-list="fileList2"
            list-type="picture">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item
          label="用户状态"
          prop="state">
          <el-radio v-model="form.state" label="1">启用</el-radio>
          <el-radio v-model="form.state" label="-1">禁用</el-radio>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit('form')">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      form: {
        title: '',
        link: '',
        advertindex: '',
        state: '1'
      },
      action: '',
      adData: [],
      fileList2: [],
      imgList: [],
      advertinfoindex: ''
    }
  },
  methods: {
    getList () {
      var that = this
      that.$axios.request('post', '/Advert/Index')
        .then((res) => {
          if (res.code === 0) {
            that.adData = res.data
          }
        })
    },
    success (file, fileList) {
      var that = this
      that.imgList.push(fileList)
    },
    remove (file, fileList) {
      var that = this
      that.imgList = []
      for (var i = 0; i < fileList.length; i++) {
        that.imgList.push(fileList[i])
      }
    },
    getParams () {
      var that = this
      that.advertinfoindex = that.$route.params.advertinfoindex
      if (that.advertinfoindex) {
        that.$axios.request('post', '/Advert/Eidt', {
          advertinfoindex: that.advertinfoindex
        })
          .then((res) => {
            if (res.code === 0) {
              that.form.title = res.data.title
              that.form.link = res.data.website
              that.form.advertindex = res.data.advertindex
              that.form.state = res.data.state + ''
              that.fileList2 = res.data.mapinfo
              for (var i = 0; i < that.fileList2.length; i++) {
                that.fileList2[i].url = that.fileList2[i].value
                that.imgList.push(that.fileList2[i])
              }
            }
          })
      } else {
        that.$router.push({
          name: 'adList'
        })
      }
    },
    submit: function (form) {
      var that = this
      var formFile = new FormData()
      that.$refs[form].validate((valid) => {
        if (valid) {
          var imgID = []
          for (var i = 0; i < that.imgList.length; i++) {
            if (that.imgList[i].response) {
              imgID.push(that.imgList[i].response.data)
            } else {
              imgID.push(that.imgList[i].index)
            }
          }
          var id = imgID.join(',')
          formFile.append('advertinfoindex', that.advertinfoindex)
          formFile.append('FileModel', id)
          formFile.append('title', that.form.title)
          formFile.append('website', that.form.link)
          formFile.append('state', that.form.state)
          formFile.append('advertindex', that.form.advertindex)
          that.$axios.request2('post', '/Advert/EidtPost', formFile)
            .then((res) => {
              if (res.code === 0) {
                that.$axios.alert(res.data, '提示', function () {
                  that.$router.push({
                    name: 'adList'
                  })
                })
              }
            })
        } else {
          return false
        }
      })
    }
  },
  mounted () {
    var that = this
    that.action = that.$axios.gp + '/File/Add'
    that.getList()
    that.getParams()
  }
}
</script>

<style>
.el-upload-list--picture .el-upload-list__item-thumbnail{width: 200px!important;height: auto;}
.el-upload-list--picture .el-upload-list__item{height: auto;}
</style>
